<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>mock</title>
  <style>
    input,
    label {
      font-size: 20px;
    }

    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }

    header,
    section {
      display: flex;
      justify-content: center;
    }

    header {
      flex: 1;
    }

    section {
      flex: 4;
    }

    .container {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .submit-container {
      width: 100%;
    }

    #url {
      width: 90%;
      height: 30px;
    }

    .data-container {
      display: flex;
      width: 100%;
    }

    .request-container,
    .response-container {
      flex-grow: 1;
    }

    #req,
    #res {
      border: solid 1px #111;
      width: 100%;
      min-height: 300px;
    }
  </style>
  <script>
    function submit() {
      const url = document.getElementById('url').value.toString();
      const req = document.getElementById('req').value.toString();
      const res = document.getElementById('res').value.toString();
      const xhr = new XMLHttpRequest();
      xhr.open('get', `http://localhost:3001/AddApi?url=${url}&&req=${req}&&res=${res}`);
      xhr.setRequestHeader('Content-Type', 'application/json');

      xhr.onload = function () {
        const { status, response } = this;
        if (status === 200) {
          const res = JSON.parse(response);

          const { status: resStatus, message } = res;
          if (resStatus) {
            alert(message);
          }
        }
      }
      xhr.send();
    }
  </script>
</head>

<body>

  <header>
    <h1>新增Api</h1>
  </header>
  <section>
    <div class="container">
      <a href="/index" style="align-self: start;">返回</a>

      <div class="submit-container">
        <label for="url">url:</label>
        <input type="text" name="text" id="url" />
      </div>
      <div class="data-container">
        <div class="request-container">
          <p>请求参数格式</p>
          <textarea id="req"></textarea>
        </div>
        <div class="response-container">
          <p>响应参数格式</p>
          <textarea id="res"></textarea>
        </div>
      </div>
      <input type="button" value="提交" onclick="submit()">
    </div>
  </section>
</body>

</html>